Candlestick Chart Types / Creating a High-Low-Open-Close Chart
In This Topic
Creating a High-Low-Open-Close Chart
In This Topic

There are two ways to create a High-Low-Open-Close chart: at design time or in Source View. This topic assumes that you have added the appropriate references and a C1CandlestickChart control to your new application.

 

At Design Time

  1. Select the C1CandlestickChart control to open the control's Properties window.
  2. Locate the Type property in the Appearance properties.
  3. Use the drop-down arrow to select "Ohlc" from the list. 
  4. Add SeriesList data as in Step 2 of the Quick Start. For a High-Low-Open-Close chart, you need High, Low, Open, Close and X values.
  5. Customize your chart using the ChartStyle options.
  6. Run your application.

In Source View

The following markup can be used to create and customize a High-Low-Open-Close chart in Source View. Note that the color and width of the chart elements has been set:

Markup
Copy Code
<cc1:C1CandlestickChart ID="C1CandlestickChart1" runat="server" Type="Ohlc">
    <CandlestickChartSeriesStyles>
        <cc1:CandlestickChartStyle>
            <HighLow Width="3">
                <Fill Color="#0033CC">
                </Fill>
            </HighLow>                   
        </cc1CandlestickChartStyle>
    </CandlestickChartSeriesStyles>
    <SeriesList>
        <cc1:CandlestickChartSeries LegendEntry="True" Label="Values">
            <Data>
                <High DoubleValues="10, 12, 11, 14, 16, 20, 18, 17" />
                <Low DoubleValues="7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10" />
                <Open DoubleValues="8,8.6,11,6.2,13.8,15,14,12"></Open>
                <Close DoubleValues="8.6,11,6.2,13.8,15,14,12,10"></Close>
                <X>
                    <Values>
                        <cc1:ChartXData DateTimeValue="2014-03-07" />
                        <cc1:ChartXData DateTimeValue="2014-03-08" />
                        <cc1:ChartXData DateTimeValue="2014-03-09" />
                        <cc1:ChartXData DateTimeValue="2014-03-10" />
                        <cc1:ChartXData DateTimeValue="2014-03-11" />
                        <cc1:ChartXData DateTimeValue="2014-03-12" />
                        <cc1:ChartXData DateTimeValue="2014-03-13" />
                        <cc1:ChartXData DateTimeValue="2014-03-14" />
                    </Values>
                </X>
            </Data>
        </cc1CandlestickChartSeries>
    </SeriesList>           
</cc1C1CandlestickChart>

 

See Also